<template>
  <div ref="dom" class="charts chart-line"></div>
</template>

<script>
import echarts from 'echarts'
import echartsLiquidfill from 'echarts-liquidfill'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartLiquidFill',
  props: {
    text: String,
    liquidFillData: Number
  },
   watch: {
    'liquidFillData':function(newVal,oldVal){
      console.log(newVal)
      this.changeChart()
    }
  },
  mounted () {
    this.changeChart()
  },
  methods:{
    changeChart(){
       this.$nextTick(() => {
        // console.log(this.liquidFillData)
        let option = {
          title: {
            text: this.text,
            show: true,
            x: 'center'
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              restore: {show: false},
              saveAsImage: {show: false}
            }
          },
          series: [{
            name: '当前数据值',
            type: 'liquidFill',
            data: [{
              value: this.liquidFillData
            }],
            label: {
              normal: {
                formatter: function (param) {
                  return param.value * 100 + 'mm'
                },
                textStyle: {
                  fontSize: 28
                }
              }
            },
            outline: {
              borderDistance: 0, // border向内占据的空间 不是width
              itemStyle: {
                borderWidth: 0
              }
            }
          }]
        }
        let dom = echarts.init(this.$refs.dom, 'tdTheme')
        dom.setOption(option)
      })
    }
  }
}
</script>

<style lang="less">

</style>
